<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="vue.js"></script>

    <script>
      // render函数  渲染元素和组件
      // this.$root
      var Home = {
        template: `<div>
                    home组件
                    <hr/>
                    <cart></cart>
                </div>`,
        data() {
          return {}
        }
      }
      Vue.component('cart', {
        render: function(CreactElement) {
          return CreactElement(
            'div', //元素或组件
            {
              //渲染标签或组件的属性
              class: {
                foo: true,
                bar: true
              },
              style: {
                color: 'red',
                fontSize: '20px'
              },
              attr: {
                //属性
                id: 'box'
              },
              props: {
                //props
                myProp: 'bar'
              },
              on: {
                //绑定事件
                click: function() {
                  alert(1)
                }
              },
              key: 'myKey',
              ref: 'myRef',
              clickHandler() {
                alert(1)
              }
            },
            [
              //文本内容和标签内容的写法
              // {
              //   text: '你好'
              // }
              CreactElement('h1', '明天放假'),
              CreactElement('h1', '后天放假')
            ]
          )
        },
        data() {
          return {}
        },
        mounted() {
          console.log(this.$root)
        }
      })
      // 用render函数来渲染Home
      var vm = new Vue({
        //根实例
        data() {
          return {
            mk: '111'
          }
        },
        render: h => h(Home) //Home 根组件
      }).$mount('#app')
    </script>
  </body>
</html>
